<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 方式1 -- 利用插槽 -->
        <!-- <tree-tools :tree-node="company">
          <el-dropdown>
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>添加子部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </tree-tools> -->

        <!-- 方式2 -- 利用属性制造差异 -->
        <tree-tools :is-root="true" :tree-node="company" @addDepts="addDepts" />
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <!-- 通过作用域插槽可以拿到数据 作用域插槽提供两个参数 { node,data } 这里只用到 data 故直接解构出来以简化代码 -->
          <!-- 有多少节点就会循环生成多少个 -->
          <tree-tools
            slot-scope="{ data }"
            :tree-node="data"
            @del-depts="getDepartments"
            @addDepts="addDepts"
            @editDepts="editDepartment"
          />
        </el-tree>
      </el-card>
      <!-- 添加部门弹出层组件 -->
      <add-depts
        ref="addDeptRef"
        :show-add-dialog.sync="showAddDialog"
        :tree-node="node"
        @addDepts="getDepartments"
        @close="showAddDialog = false"
      />
    </div>
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import { getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils'
import AddDepts from './components/add-depts.vue'
export default {
  name: 'DepartmentsIndex',
  components: {
    TreeTools,
    AddDepts
  },
  data() {
    return {
      company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人' },
      departs: [],
      defaultProps: {
        label: 'name' // 表示 从这个属性显示内容
      },
      // 控制添加弹出层
      // 运行过程:
      /*
      1. 父组件定义开关
      2.add-depts 接收开关值
      3.tree-tools点击发送消息(让父组件修改开关状态,并携带当前点击的组别参数)
      4.接收事件并定义相关函数完成操作
      */
      showAddDialog: false,
      node: null
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      const result = await getDepartments()
      console.log(result)
      // 方式2 传入 id 以便子组件查询兄弟部门
      this.company = { name: result.companyName, manager: '负责人', id: '' }
      this.departs = tranListToTreeData(result.depts)
    },
    addDepts(node) {
      this.showAddDialog = true
      this.node = node
    },
    editDepartment(node) {
      this.showAddDialog = true
      this.node = node
      // 方式1.父子传参(数据在父组件), 把子组件的数据拿到父组件(要是数组或者对象)
      /**
       * <add-depts
        :form-data="formData"/>
      this.formData = await getDepartmentDetail(node.id)
       */
      // 方式2.通过ref直接修改子组件的数据
      // this.$refs.addDeptsRef.formData = await getDepartmentDetail(node.id)
      // 方式3.通过ref调用子组件的方法修改子组件的数据
      this.$refs.addDeptRef.getDepartmentDetail(node.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
